<template>
	<view>
		<!-- <uni-popup ref="draw" type="center" @touchmove.stop.prevent="" :maskClick="false">
			<view class="draw">
				<view class="head f-c-c">
					<image :src="c_imgPath + 'chouka/title_img.png'"></image>
				</view>
				<view class="step">
					<view class="step_1 f-c-c mt38 mb34" v-if="step == 1">
						<view class="background wh100 "></view>
						<image :src="BaseImg2('details_2403112_3.png')" class="step_icon_1 animate"></image>
					</view>
					<view class="step_2 f-c-c mt38 mb34" v-if="step == 2">
						<view class="step_icon_2" v-if="grandNum[0] == 1"></view>
						<view class="step_icon_3" v-if="grandNum[0] == 2"></view>
					</view>
				</view>
				<view class="foot f-c-c relative z-2" @click="skipAnimate(false)">
					跳过
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="drawResult" type="center" :maskClick="false">
			<view class="result fixed">
				<view class="head f-c-c">
					<image class="head_icon" :src="c_imgPath + 'chouka/title_img.png'"></image>
				</view>
				<view class="result_list fixed f-c j-s">
					<!-- <view>
						<image v-if="isSwiping && Math.sign(offsetX) == -1" :src="BaseImg2('details_7.png')"
							class="result_list_icon"></image>
					</view> -->
					<view class="item absolute" :class="'item_bg_'+item.shang_id" v-for="(item,index) in drawList"
						:key="index" :style="item.style" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
						@touchend="handleTouchEnd">
						<!-- transform: item.animateType == 1 ? `translateX(${Math.sign(offsetX) * 1000}rpx)`: item.shang_id != 4 && index !=vm.arrLen ? 'scale(0.9)' : ''/ -->
						<!-- left : index < 2?`${130 + 16 * (index + 1)}rpx`:`178rpx`,
						top : index < 2?`${  18 * (index + 1) }rpx`:'54rpx', -->
						<view class="item-img"
							:style="'background: url('+ item.special_imgurl+ ') no-repeat 0 0 / 100% 100%;'">
							<image :src="item.goodslist_imgurl" class="itme_img"></image>
						</view>
						<!-- <image v-if="item.shang_id > 0 && item.out_price > 0"
							:src="BaseImg2(`detail_240109_${item.shang_id}.png`)" class="absolute cate_icon">
						</image> -->
						<div class="item_title hang1"
							:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
							{{item.goodslist_title}}
						</div>
						<!-- <view class="item_price mt10">
							{{item.out_price > 0 ?`兑换：${item.out_price*1}星豆`:'不可兑换星豆'}}
						</view> -->
					</view>
					<!-- <view>
						<image v-if="isSwiping && Math.sign(offsetX) == 1" :src="BaseImg2('details_6.png')"
							class="result_list_icon"></image>
					</view> -->
				</view>
				<view class="foot relative z-100 f-c-c">
					<view class="foot_btn f-c-c" @click="btnOper('towrap')"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						去卡册
					</view>
					<view class="foot_btn f-c-c"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						{{list_num - arrLen}}/{{list_num}}
					</view>
					<view class="foot_btn f-c-c" @click="btnOper('animateEnd')"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let Audio;
	let vm;
	export default {
		data() {
			return {
				step: 1,
				drawList: [], //中间列表
				grandNum: [],
				timer: null,
				timer2: null,
				isSwiping: false,
				startOffsetX: 0,
				startOffsetY: 0,
				offsetX: 0,
				offsetY: 0,
				autoDraw: false,
				currentItem: null,
				moveTimer: null,
				arrLen: 0,
				c_imgPath: 'https://qt.yhemall.com/',

				list_num: 0
			}
		},
		methods: {
			open(drawList, autoDraw) {
				vm = this
				vm.arrLen = drawList.length - 1
				vm.list_num = drawList.length;
				drawList.forEach((item, index) => {
					item.style =
						"transform: translate(0px, 0px) scale(1);transition: transform 0s ease-in-out"

					// if (item.shang_id != 4 && index != vm.arrLen) {
					// 	item.style = {
					// 		transform: 'translate(0px, 0px) scale(.9)',
					// 		transition: 'transform 0s ease-in-out'
					// 	}
					// } else {


					// }
					// if (item.shang_id < 3) {
					// 	this.grandNum.push(item.shang_id)
					// }
					if (index == vm.arrLen) {
						vm.drawList[vm.arrLen] = item
					}
				})
				this.drawList = []
				this.drawList = drawList
				this.step = 1
				// this.$refs.draw.open()
				this.skipAnimate(autoDraw)
				// if (this.timer) clearTimeout(this.timer)
				// this.timer = setTimeout(() => {
				// 	this.step = 2
				// 	Audio.stop()
				// 	// let inTimer = setInterval(() => {
				// 	// 	this.grandNum.shift()
				// 	// 	if (this.grandNum.length == 0) clearInterval(inTimer)
				// 	// }, 3000)
				// 	this.skipAnimate(autoDraw)
				// 	// if (this.timer2) clearTimeout(this.timer2)
				// 	// this.timer2 = setTimeout(() => {

				// 	// 	clearTimeout(this.timer2)
				// 	// }, this.grandNum.length * 3000)
				// 	clearTimeout(this.timer)

				// }, 2300)
			},
			// 跳过动画
			skipAnimate(autoDraw) {
				if (this.timer) clearTimeout(this.timer)
				if (this.timer2) clearTimeout(this.timer2)
				this.autoDraw = autoDraw
				// this.$refs.draw.close()
				this.$refs.drawResult.open()
				setTimeout(() => {
					if (this.autoDraw) {
						this.btnOper('animateEnd', autoDraw)
					}
				}, 1500)
			},
			btnOper(key, autoDraw = false) {
				this.drawList = []
				this.autoDraw = autoDraw
				this.$refs.drawResult.close()
				this.$emit(key, this.autoDraw)
			},
			handleTouchStart(event) {
				if (this.isSwiping || this.offsetX != 0) return;
				// 如果绘制列表中只有一个元素，则直接返回
				if (vm.arrLen == 0) return this.btnOper('animateEnd')
				// 设置滑动标志为true
				this.isSwiping = true;
				// 记录触摸开始时的横向位置
				this.startOffsetX = event.touches[0].clientX;
				this.startOffsetY = event.touches[0].clientY;
			},
			handleTouchMove(event) {
				// 如果不是滑动操作，则直接返回
				if (!this.isSwiping) return;
				// 如果绘制列表中只有一个元素，则直接返回
				if (vm.arrLen == 0) return this.btnOper('animateEnd')
				// 计算当前触摸点相对于开始触摸点的横向偏移量
				const offsetX = event.touches[0].clientX - this.startOffsetX;
				const offsetY = event.touches[0].clientY - this.startOffsetY;
				vm.drawList[vm.arrLen].style =
					`transform: translate(${offsetX}px, ${offsetY}px);transition: transform 0s ease-in-out`

				console.log(offsetX);
				console.log(offsetY);
				vm.$set(vm.drawList, vm.arrLen, vm.drawList[vm.arrLen])
				// 将偏移量保存到data中
				this.offsetX = offsetX;
				this.offsetY = offsetY;
			},
			handleTouchEnd() {
				// 如果不是滑动操作，则直接返回
				if (!this.isSwiping) return;
				// 如果绘制列表中只有一个元素，则直接返回
				if (vm.arrLen == 0) return this.btnOper('animateEnd')
				// 此处用法为在js中调用，需要写uni.$u.throttle() debounce
				// uni.$u.throttle(, 1, true)
				// uni.$u.throttle(this.startAnimate, 500, false)
				this.startAnimate()
			},
			startAnimate() {
				// 手指滑动距离超过30,开启滑动动画
				let offsetX = Math.abs(this.offsetX)
				let offsetY = Math.abs(this.offsetY)
				if (offsetX > 30 || offsetY > 30) {
					// 设置最后一个绘制元素的动画类型为1
					if (offsetX > offsetY) {
						vm.drawList[vm.arrLen].style =
							`transform:translate(${Math.sign(this.offsetX) * 1000}px,${this.offsetY}px);transition:transform 0.3s ease-in-out`

					} else {
						vm.drawList[vm.arrLen].style =
							`transform: translate(${this.offsetX}px,${Math.sign(this.offsetY) * 1000}px);transition: transform 0.3s ease-in-out`
					}
					// 使用Vue.set更新最后一个绘制元素
					this.$set(this.drawList, vm.arrLen, vm.drawList[vm.arrLen])
					vm.arrLen = vm.arrLen - 1
					// 延迟500ms执行后续操作
					setTimeout(() => {
						// 移除最后一个绘制元素
						this.drawList.pop()

						vm.drawList[vm.arrLen] = this.drawList[vm.arrLen]
						vm.drawList[vm.arrLen].style =
							"transform: translate(0px, 0px) scale(1);transition: transform 0.3s ease-in-out"

						this.$set(this.drawList, vm.arrLen, vm.drawList[vm.arrLen])
						// 重置滑动标志和横向偏移量
						this.isSwiping = false;
						this.offsetX = 0;
						this.offsetY = 0;


					}, 300)
				} else {
					vm.drawList[vm.arrLen].style =
						"transform: translate(0px, 0px);transition: transform .3s ease-in-out"


					this.isSwiping = false;
					this.offsetX = 0;
					this.offsetY = 0;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draw {
		.head {
			.head_icon {
				width: 430rpx;
				height: 124rpx;
			}
		}

		.step {
			.step_1 {
				width: 750rpx;
				height: 750rpx;

				.background {
					position: absolute;
					top: 0;
					left: 0;
					// background: url($imgA+'details_240312_5.png') no-repeat 0 0 / 100% 100%;
					animation: rotateBackground 10s linear infinite;
				}

				/* 设置动画 */
				.step_icon_1 {
					width: 588rpx;
					height: 418rpx;
				}
			}

			.step_2 {
				width: 750rpx;
				height: 750rpx;

				.step_icon_2 {
					width: 750rpx;
					height: 750rpx;
					// background: url($imgA+'details_240312_9.png') no-repeat center / 1160rpx 1160rpx;
					animation: rotateBackground2 3s linear infinite;
				}

				.step_icon_3 {
					width: 750rpx;
					height: 750rpx;
					// background: url($imgA+'details_240312_8.png') no-repeat center / 1160rpx 1160rpx;
					animation: rotateBackground2 3s linear infinite;
				}
			}
		}

		@keyframes rotateBackground {

			/* 定义旋转动画 */
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		@keyframes rotateBackground2 {

			/* 定义旋转动画 */
			0% {
				transform: rotate(0deg);
			}

			90% {
				transform: rotate(720deg) scale(1);
				opacity: 1;
			}

			100% {
				transform: rotate(800deg) scale(2);
				opacity: 0;
			}
		}

		.foot {
			width: 240rpx;
			height: 80rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			// background: url($imgA+'details_240311_5.png') no-repeat 0 0 / 100% 100%;
		}

		@keyframes tada {
			0% {
				-webkit-transform: scaleX(1);
				transform: scaleX(1)
			}

			10%,
			20% {
				-webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
				transform: scale3d(.9, .9, .9) rotate(-3deg)
			}

			30%,
			50%,
			70%,
			90% {
				-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
				transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
			}

			40%,
			60%,
			80% {
				-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
				transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
			}

			to {
				-webkit-transform: scaleX(1);
				transform: scaleX(1)
			}
		}

		.animate {
			-webkit-animation-name: tada;
			animation-name: tada;
			-webkit-animation-duration: 2s;
			animation-duration: 2s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
	}

	.result {
		width: 100vw;
		left: 0;
		top: 0;

		.head {
			margin-top: 260rpx;

			.head_icon {
				width: 448rpx;
				height: 84rpx;
			}
		}

		.result_list {
			width: 100vw;
			height: 100vh;
			padding: 30rpx;
			left: 0rpx;
			top: 0rpx;

			.result_list_icon {
				width: 40rpx;
				height: 34rpx;
				transition: transform 0.3s ease-in-out;
			}

			.item {
				top: 400rpx;
				left: 75rpx;
				width: 600rpx;
				height: 800rpx;
				// background: url($imgA+'details_240311_16.png') no-repeat 0 0 / 100% 100%;
				text-align: center;
				/* 添加过渡动画效果 */
				transition: transform 0.3s ease-in-out;

				.item-img {
					width: 590rpx;
					height: 764rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.itme_img {
					margin-top: 20rpx;
					width: 460rpx;
					height: 660rpx;
				}

				.cate_icon {
					width: 264rpx;
					height: 68rpx;
					top: 400rpx;
					left: calc((466rpx - 264rpx) / 2);
				}

				.item_title {
					width: 300rpx;
					margin: 40rpx auto 0;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.item_price {
					font-size: 26rpx;
					color: #AFA8FF;
				}
			}

			// .item_bg_1 {
			// 	background: url($imgA+'details_240311_7.png') no-repeat center / 548rpx 728rpx;
			// }

			// .item_bg_2 {
			// 	background: url($imgA+'details_240311_6.png') no-repeat center / 548rpx 728rpx;
			// }

			// .item_bg_3 {
			// 	background: url($imgA+'details_240311_8.png') no-repeat center / 548rpx 728rpx;
			// }

			// .item_bg_4 {
			// 	// background: url($imgA+'details_240311_16.png') no-repeat 0 0 / 100% 100%;
			// 	background: url($imgA+'details_240311_16.png') no-repeat center / 548rpx 728rpx;
			// }
		}

		.foot {
			margin-top: 1280rpx;

			.foot_btn {
				width: 220rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				// background: url($imgA+'details_240311_5.png') no-repeat 0 0 / 100% 100%;
			}

		}
	}
</style>